<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <!-- import CSS -->
    <link rel="stylesheet" href="https://cdn.staticfile.org/element-ui/2.15.9/theme-chalk/index.css">
    <style>
        body{
            font: 14px/1.5 "Helvetica Neue",Helvetica,Arial,"PingFang SC","\5FAE\8F6F\96C5\9ED1","\5b8b\4f53",sans-serif,tahoma;
            color: #3C2314;
        }
        div{
            display: block;
        }
        p{
            display: block;
            margin-block-start: 1em;
            margin-block-end: 1em;
            margin-inline-start: 0px;
            margin-inline-end: 0px;
            margin: 0;
        }
        h2{
            font-size: 100%;
            font-weight: 400;
            margin: 0;
            margin-block-start: 0.83em;
            margin-block-end: 0.83em;
            margin-inline-start: 0px;
            margin-inline-end: 0px;
        }
        ul{
            list-style: none;
            padding: 0;
            margin: 0;
            margin-block-start: 1em;
            margin-block-end: 1em;
            margin-inline-start: 0px;
            margin-inline-end: 0px;
            padding-inline-start: 40px;
        }
        li{
            margin: 0;
            display: list-item;
            text-align: -webkit-match-parent;
        }
        .main_line{
            border-bottom: 1px solid #E7E7E7;
        }
        .main_body{
            width: 1162px;
            margin: 0 auto;
            letter-spacing: 1.5px;
            padding-top: 0;
        }
        .d2{
            background-color: #f9f9f9;
            padding-left: 5px;
            padding-top: 5px;
            overflow: hidden;
            padding-bottom: 14px;
            margin-bottom: 28px;
            border-bottom: 1px solid #E7E7E7;
            margin-top: 28px;
        }
        .d3{
            width: 180px;
            height: 98px;
            border: 1px solid #E7E7E7;
            margin: 0 10px 10px 0;
            float: left;
            background-color: #fff;
        }
        .pic img{
            width: 98px;
            height: 98px;
            vertical-align: middle;
        }
        img{
            border: 0;
        }
        .d3_d1{
            float: right;
            display: inline-block;
        }
        h3{
            margin-top: 6px;
            margin-right: 5px;
            color: #3C2314;
            line-height: 14px;
            height: 14px;
            word-break: break-all;
            font-size: 100%;
            font-weight: 400;
        }
        h4{
            font-size: 100%;
            font-weight: 400;
            margin: 0;
            display: block;
            margin-block-start: 1.33em;
            margin-block-end: 1.33em;
            margin-inline-start: 0px;
            margin-inline-end: 0px;
        }
        .main_d3,.pic{
            position: relative;
        }
        .d3_d2{
            position: absolute;
            bottom: 0px;
            right: 0px;
            clear: both;
        }
        i{
            display: inline-block;
            margin-right: 7px;
        }
        .d3_a{
            z-index: 5;
        }
        a{
            text-decoration: none;
            outline: 0;
            color: #3C2314;
        }
        .zong{
            padding-left: 5px;
            text-align: right;
        }
        .price{
            text-align: right;
            display: inline-block;
        }
        .price_i{
            padding-left: 8px;
            min-width: 70px;
            display: inline-block;
            text-align: right;
            font-style: normal;
        }
        。tight p{
            float: left;
        }
        。black{
            padding: 13px 28px;
            background-color: #3C2314;
            color: #FAF5DC;
            line-height: 16px;
            text-align: center;
        }
        .order{
            float: right;
        }
        .main_d4{
            height: 106px;
        }
        div ul li{
            float: left;
            height: 280px;
            padding: 28px 7px;
        }
        div ul li a{
            display: block;
            position: relative;
            height: 280px;
            width: 280px;
            overflow: hidden;
        }
        ul li .a_div{
            position: absolute;
            width: 250px;
            height: 50px;
            border: 1px solid #e7e7e7;
            left: 14px;
            bottom: 14px;
            background-color: rgba(255,255,255,.7);
            padding-top: 8px;
            z-index: 100;
        }
        ul li .a_div h3{
            color: #3C2314;
            height: 22px;
            line-height: 22px;
            text-align: center;
        }
        ul li .a_div h4{
            color: #AA8764;
            height: 22px;
            line-height: 22px;
            text-align: center;
        }
        .div_head{
            padding: 0;
            position:fixed;
            width: 100%;
            height: 4rem;
            right: 0;
            top:0;
            background-color:white;
            z-index: 55;
        }
        #head_span{
            display: block;
            margin: 9px 70px 0 0 ;
        }
        #head_span>a{
            text-decoration: none;
            color: #909399;
            margin-left: 20px;
        }
        #head_span a:hover{
            color: rgb(145, 160, 208);
        }
    </style>
</head>
<body>
<div id="app">
    <el-container>
        <el-header>
            <div class="div_head">
                <el-menu mode="horizontal" background-color="white"
                         text-color="color: rgb(29, 56, 136)" active-text-color="color: rgb(29, 56, 136)" style="width:1200px;margin: 0 auto">
                    <el-menu-item><img  height="50px" src="imgs/logo.png" alt=""></el-menu-item>
                    <el-menu-item index="1">首页</el-menu-item>
                    <el-menu-item index="2">蛋糕</el-menu-item>
                    <el-menu-item index="3">下午茶</el-menu-item>
                    <el-menu-item index="4">精选食材</el-menu-item>
                    <el-menu-item index="5">最新活动</el-menu-item>
                    <el-menu-item index="6">企业专区</el-menu-item>
                    <el-menu-item index="6">会员中心</el-menu-item>
                    <div style="float: right;position: relative; top: 10px">
                <span id="head_span">
                <a href="">登录 </a> <a href=""> 注册</a>
                    <a href=""><i class="el-icon-s-goods" style="margin-left: 10px"></i></a>
                </span>
                    </div>
                </el-menu>
            </div>
        </el-header>
        <el-main>
            <div class="main_body">
                <div>
                    <div>
                        <div><h1>购物袋</h1></div>
                        <p class="main_line"></p>
                    </div>
                    <div style="overflow: hidden;margin-bottom: 28px;">
                        <div>
                            <div style="padding: 28px 0 28px 8px;overflow: hidden;height: 98px;
                            border-bottom: 1px solid #E7E7E7;position: relative;">
                                <div style="position: absolute;">
                                    <a href="">
                                        <div style="margin-right: 14px;float: left;">
                                            <img style="width: 98px;height: 98px;vertical-align: middle;"
                                                 src="https://images.ebeecake.com/img_w/5662.jpg" alt="">
                                        </div>
                                        <div style="float: left;">
                                            <h3 style="font-size: 18px;margin-top: 10px;color: #3C2314;">
                                                芒果摩卡的春天|三拼蛋糕
                                            </h3>
                                            <p style="width: 560px;color: #AA8764;">
                                                14厘米|适合2-4人食用|+4套餐具
                                            </p>
                                        </div>
                                    </a>
                                </div>
                                <div style="position: absolute;top: 43px;height: 20px;right: 252px;color: #3C2314;">
                                    <span>￥225</span>
                                    /
                                    <span>件</span>
                                </div>
                                <div style="position: absolute;top: 43px;right: 105px;">
                                    <template>
                                        <el-input-number size="mini" v-model="num" @change="handleChange" :min="1" :max="10" label="描述文字"></el-input-number>
                                    </template>
                                </div>
                                <div style="position: absolute;top: 43px;right: 0;">
                                    <span style="line-height: 20px;height: 20px;color: #AA8764;display: block;font-weight: 400;">
                                        ￥225
                                    </span>
                                    <a style="float: right;color: #AAA;margin-top: 38px;" href="javascript:void (0)">
                                        删除
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="d2">
                    <div><h1>选购配件</h1></div>
                    <div>
                        <div class="d3">
                            <a class="d3_a" href="">
                                <div class="pic">
                                    <img src="https://images.ebeecake.com/img_w/3647.jpg" alt="">
                                    <div class="d3_d1">
                                        <h3>鲜花</h3>
                                    </div>
                                    <div class="d3_d2">
                                        <h3 class="d3_d2_h3">添加</h3>
                                    </div>
                                </div>
                            </a>
                        </div>
                        <div class="d3">
                                <a class="d3_a" href="">
                                    <div class="pic">
                                        <img src="https://images.ebeecake.com/img_w/3646.jpg" alt="">
                                        <div class="d3_d1">
                                            <h3>鲜花</h3>
                                        </div>
                                        <div class="d3_d2">
                                            <h3 class="d3_d2_h3">添加</h3>
                                        </div>
                                    </div>
                                </a>
                        </div>
                        <div class="d3">
                            <a class="d3_a" href="">
                                <div class="pic">
                                    <img src="https://images.ebeecake.com/img_w/3644.jpg" alt="">
                                    <div class="d3_d1">
                                        <h3>鲜花</h3>
                                    </div>
                                    <div class="d3_d2">
                                        <h3 class="d3_d2_h3">添加</h3>
                                    </div>
                                </div>
                            </a>
                        </div>
                        <div class="d3">
                            <a class="d3_a" href="">
                                <div class="pic">
                                    <img src="https://images.ebeecake.com/img_w/3642.jpg" alt="">
                                    <div class="d3_d1">
                                        <h3>鲜花</h3>
                                    </div>
                                    <div class="d3_d2">
                                        <h3 class="d3_d2_h3">添加</h3>
                                    </div>
                                </div>
                            </a>
                        </div>
                        <div class="d3">
                            <a class="d3_a" href="">
                                <div class="pic">
                                    <img src="https://images.ebeecake.com/img_w/3645.jpg" alt="">
                                    <div class="d3_d1">
                                        <h3>鲜花</h3>
                                    </div>
                                    <div class="d3_d2">
                                        <h3 class="d3_d2_h3">添加</h3>
                                    </div>
                                </div>
                            </a>
                        </div>
                        <div class="d3">
                            <a class="d3_a" href="">
                                <div class="pic">
                                    <img src="https://images.ebeecake.com/img_w/3643.jpg" alt="">
                                    <div class="d3_d1">
                                        <h3>鲜花</h3>
                                    </div>
                                    <div class="d3_d2">
                                        <h3 class="d3_d2_h3">添加</h3>
                                    </div>
                                </div>
                            </a>
                        </div>
                    </div>
                </div>
                <div class="main_d4">
                    <div class="main_d3">
                        <span>
                            <a href="">继续购物</a>
                            <a href="">清空</a>
                        </span>
                        <div style="position: absolute;right: 0;top: 0;text-align: right;">
                            <div>
                            <p style="float: left;margin: 0;">
                                <span style="padding-right: 5px;"><i style="font-style: normal;">1</i>件商品</span>
                                |
                                <span class="zong">总金额</span>
                            </p>
                            <span class="price"><i class="price_i">￥225</i></span>
                            </div>
                        </div>
                    </div>
                    <br><br>
                    <div class="order">
                        <a style="padding: 13px 28px;background: #3C2314;color: #FAF5DC;line-height: 16px;
                            text-align: center;" href="/jiesuanyemian2.html">结算</a>
                    </div>
                </div>
                <p class="main_line"></p>
                <div style="padding-top: 42px;width: 1162px;margin: 0 auto;position: relative;">
                    <h2 style="line-height: 34px;display: block;">
                        <span style="font-size: 18px;color: #3C2314;">更多推荐</span>
                    </h2>
                    <div style="padding-top: 7px;">
                        <ul style="width: 1176px;margin-left: -7px!important;display: block;">
                            <li><a href="">
                                <div class="a_div">
                                    <h3 style="margin: 0">初心|牛油果蛋糕</h3>
                                    <h4 style="margin: 0">￥335起</h4>
                                </div>
                            </a></li>
                            <li><a href="">
                                <div class="a_div">
                                    <h3 style="margin: 0">沉香|生椰拿铁慕斯蛋糕</h3>
                                    <h4 style="margin: 0">￥225起</h4>
                                </div>
                            </a></li>
                            <li><a href="">
                                <div class="a_div">
                                    <h3 style="margin: 0">桃芝|樱桃芝士</h3>
                                    <h4 style="margin: 0">￥265起</h4>
                                </div>
                            </a></li>
                            <li><a href="">
                                <div class="a_div">
                                    <h3 style="margin: 0">星空|黑森林</h3>
                                    <h4 style="margin: 0">￥225起</h4>
                                </div>
                            </a></li>
                        </ul>
                    </div>
                </div>
            </div>
        </el-main>
        <el-footer>
            <div style="background-color: #282c30;color: #666666;text-align: center;padding: 50px 0">
                <p>有家蛋糕 提前3小时预订，北京市六环内免费配送 公司地址：北京市朝阳区798艺术区工美楼3层</p>
                <p>Copyright © 2009-2023 ebeecake有家蛋糕 有家（北京）食品有限公司 京ICP备09081733号-1 <img src="https://cdn.tmooc.cn/tmooc-web/css/img/beianh2019082901.png"> 京公网安备 11010802029572号</p>
                <p>公司电话：4006106798    食品经营许可证：JY11105110232865    食品生产许可证：SC12411051114584</p>
            </div>
        </el-footer>
    </el-container>
</div>
</body>

<!-- import Vue before Element -->
<script src="https://cdn.staticfile.org/vue/2.6.14/vue.min.js"></script>
<!-- import JavaScript -->
<script src="https://cdn.staticfile.org/element-ui/2.15.9/index.min.js"></script>
<script>
    let v = new Vue({
        el: '#app',
        data: function () {
            return {
                num: 1
            }
        },
        methods:{
            handleChange(value) {
                console.log(value);
            }
        }
    })
</script>
</html>